<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
    </style>
</head>
<body>
    <p>文字</p>
    <p>文字2</p>
<script>
/* 
1. 异步与同步区别
2. 手写promise 加载图像
3. 前端使用异步场景
*/

/* 
console.log(1);
setTimeout(function(){
    console.log(2)
},1000)
console.log(3);
setTimeout(function(){
    console.log(4);
},0)
console.log(5)
// 1 3 5 4 2 
*/



// 单线程 和异步 
// js 是单线程语言，只能同时做一件事
//  浏览器和nodejs已经支持js启动进程，web Worker
// js 和dom渲染公用同一个线程，因为js可修改Dom结构
//  遇到等待（网络请求，定时任务） 不能卡住
//  不能点击，滚动，xxx

// 需要异步，异步基于callback形式


//  异步
console.log(100);
setTimeout(function(){
    console.log(200)
},1000);
console.log(300);

// 同步
console.log(100);
alert(200);
console.log(300);

// 小结 异步与同步
// 基于js是单线程语言
// 异步不会阻塞代码执行
//  同步会阻塞代码执行


//  应用场景 
// 网络请求，比如ajax 图片加载
// 定时任务 setTimeout
// ajax
console.log('start');
$.get('./json',function(res){console.log(res)})
console.log('end');

// 图片
console.log('start');
let img = document.createElement('img');
img.onload =function(){
    console.log('load')
}
img.src="./xxx.png";
console.log('end');

// setTimeout
console.log(100);
setTimeout(function(){
    console.log(200);
},1000)
console.log(300)

// setInteval
console.log(100);
setInterval(function(){
    console.log(200);
},1000)
console.log(300)



//  callback hell
$.get(url,data1=>{
    console.log(data1);

    $.get(url2,data2=>{
        console.log(data2);

        $.get(url3,data3=>{
            console.log(data3);
            // 可能还有很多层
        })
    })

})

//  promise
function getData(){
    return new Promise((resolve,reject)=>{
        $.ajax({
            success(data){
                resolve(data);
            },
            error(err){
                reject(err);
            }
        })
    })
}

const url1 = '/data1.json';
const url2 = '/data2.json';
const url3 = '/data3.json';
getData(url1)
.then(data1=>{
    console.log(data1);
    return getData(url2);
})
.then(data2=>{
    console.log(data2);
    return getData(url3);
})
.then(data3=>{
    console.log(data3);
     
})
.catch(err=>console.log(err))


/* 
1. 异步与同步区别
2. 手写promise 加载图像
3. 前端使用异步场景
*/

function loadImg(src){
    return new Promise((resolve,reject)=>{
        const img  = document.createElement("img");
        img.onload=()=>{
            resolve(img);
        }
        img.onerror = (err)=>{
            reject(err);
        }
        img.src = src;
    })
}
loadImg(url).then(img=>{
    console.log(img.width);
    return img;
})
.then(img=>{
    console.log(img.height);
    return loadImg(url2);
    
})
.then(img2=>{
    console.log(img2.height)
})


// setTimeout  笔试题
/* 
console.log(1);
setTimeout(function(){
    console.log(2)
},1000)
console.log(3);
setTimeout(function(){
    console.log(4);
},0)
console.log(5)
// 1 3 5 4 2 
*/

</script>
</body>
</html>